<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>demo13-处理边界-访问子组件dom</title>
</head>
<script src="../libs/vue.js"></script>
<style>
    .container{
        width: 100%;
        min-width: 320px;
        max-width: 640px;

        margin:0 auto;
    }
</style>
<body> 
    <div id="app"> 
        <button v-on:click="showRoot">显示$root</button>
    </div>
</body>

<script>


var app = new Vue({
  el: '#app',
  data: {
    foo: 1
  },
  computed: {
    bar: function () { 
        return 'this is bar'
     }
  },
  methods: {
    baz: function () { /* nothing here */ },
    showRoot:function(){
        console.log(this.$root == app);  // true 
        console.log(this.$root);
        console.log(this.$root.foo);
        console.log(this.$root.bar);
        console.log(this.$root.baz);
    }
  }
});
</script>
</html>